import React, { Component, PropTypes } from 'react';
import { messages } from 'share/common';
import { Affix, Button, Form, Spin, message } from 'antd';
import Condition from 'components/condition';
import 'styles/request-and-expense-settings/verfication.scss';
import { formDecorator } from 'containers/request-and-expense-settings/invoice-management/decorator';
import {
  verificationMap,
  verificationGetServiceMap,
  verificationPostServiceMap
} from 'containers/request-and-expense-settings/invoice-management/dataSources';

const { If } = Condition;

@Form.create()
@formDecorator
class Verification extends Component {

  formItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 10, offset: 1 } };

  constructor(props) {
    super(props);
    this.state = {
      formList: verificationMap.get(props.params.key),
      loading: false,
      spinning: true,
      data: {}
    };
  }

  componentDidMount() {
    this.handleInitData()
      .then();
  }

  handleInitData = async () => {
    const { params: { key }, id, form: { setFieldsValue } } = this.props;
    const { formList } = this.state;
    try {
      const data = await verificationGetServiceMap.get(key)(id);
      const obj = { };
      Object.keys(formList)
        .map(item => {
          !formList[item].isRegex  && (obj[item] = data.data[item]);
        });
      this.setState({ data: data.data });
      setFieldsValue({ ...obj });
    }
    catch (e) {

    }
    this.setState({ spinning: false });
  };

  handleSave = () => {
    const { data } = this.state;
    const { params: { key } } = this.props;
    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll(async (errors, values) => {
      if (!errors) {
        this.setState({ loading: true });
        try {
          await verificationPostServiceMap.get(key)({ ...data, ...values });
          message.success(messages('common.operate.success')/*操作成功*/);
        }
        catch (e) {

        }
        this.setState({ loading: false });
      }
    });
  };

  goBack = () => {
    window.history.back(-1);
  };

  render() {
    const { params: { key } } = this.props;
    const { loading, spinning } = this.state;
    return (
      <section className="verification">
        <Form className="new-form">
          <Spin spinning={spinning}>
            {
              this.renderFormList()
            }
          </Spin>

          <Affix offsetBottom={0} className="bottom-bar">
            <Button
              loading={loading}
              onClick={this.goBack}
            >
              {messages('common.back')/*返回*/}
            </Button>
            <If value={['overdue-verification', 'repeat-verification', 'compliance-check'].indexOf(key) === -1}>
              <Button
                type="primary"
                loading={loading}
                onClick={this.handleSave}
                className="verification__button_save"
              >
                {messages('common.ok')/*确定*/}
              </Button>
            </If>
          </Affix>
        </Form>
      </section>
    );
  }

  static PropTypes = {
    params: PropTypes.object
  };
}


export default Verification;
